<!-- src/components/SelectBox.vue -->
<template>
  <div class="select-box">
    <h3>单选下拉框</h3>
    <select v-model="city">
      <option value="">请选择城市</option>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
    </select>
    <p>选择的城市：{{ city }}</p>

    <h3>多选下拉框</h3>
    <select v-model="languages" multiple>
      <option value="JavaScript">JavaScript</option>
      <option value="Python">Python</option>
      <option value="Java">Java</option>
      <option value="Go">Go</option>
    </select>
    <p>选择的语言：{{ languages.join(', ') }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const city = ref('')
const languages = ref([])
</script>

<style scoped>
.select-box {
  margin: 16px 0;
}
select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>
